<template>
  <div class="storage-location full-height page-content content relative-position">
    <unfold>
      <!-- 左侧树状列表 -->
      <template v-slot:tree-list>
        <div class="left box tree-list">
          <!-- header -->
          <div class="tree-head bg-primary text-white text-weight-regular">
            <q-icon name="iconfont iconcangkuliebiao-23" color="white" class="q-mr-sm" />
            <span class="head-title vertical-middle user-select-none">仓库列表</span>
          </div>
          <q-scroll-area class="box-content bg-white full-height" :thumb-style="thumbStyle">
            <q-list style="min-width: 100px;">
              <div v-for="item in warehouseList" :key="item.id">
                <q-item
                  class="role-item"
                  :active="params.id === item.id"
                  active-class="activated"
                  @click="selWarehouse(item.id)"
                  clickable
                  v-ripple
                >
                  <q-item-section>{{ item.name }}</q-item-section>
                </q-item>
                <q-separator />
              </div>
            </q-list>
          </q-scroll-area>
        </div>
      </template>
      <!-- 右侧 card -->
      <template v-slot:content>
        <div class="padding-l-20 padding-r-20 page-content relative-position full-height">
          <collapse ref="collapse">
            <template v-slot:content>
              <div class="form-inline justify-between form-inline bottom" style="padding: 4px 0 0">
                <div class="left flex">
                  <div class="margin-r-20 margin-b-20">
                    <q-input v-model="params.number"
                             dense
                             emit-value
                             map-options
                             placeholder="请输入库位编号"
                             outlined>
                      <template v-slot:before>
                        <label class="text-right name label-width font-size-16 text-black">
                          <span>库位编号:</span>
                        </label>
                      </template>
                    </q-input>
                  </div>
                  <div class="margin-r-20 margin-b-20">
                    <q-input v-model="params.name"
                             dense
                             emit-value
                             map-options
                             placeholder="请输入库位名称"
                             outlined>
                      <template v-slot:before>
                        <label class="text-right name label-width font-size-16 text-black">
                          <span>库位名称:</span>
                        </label>
                      </template>
                    </q-input>
                  </div>
                </div>
                <div class="flex no-wrap">
                  <q-btn
                    class="btn margin-r-10"
                    outline dense emit-value map-options options-dense
                    color="primary"
                    @click="resetSearch()"
                    label="重置"
                  />
                  <q-btn class="btn" unelevated type="submit" color="primary" label="查询" @click="searchData()" />
                </div>
              </div>
              <div class="form-inline bottom" style="padding: 0 0 16px">
                <q-btn class="btn margin-r-10"
                       outline
                       color="primary"
                       label="新增"
                       @click="createOrEdit('create')"/>
              </div>
            </template>
          </collapse>
          <q-table :data="tableData"
                   :columns="tableColumns"
                   row-key="id"
                   class="myTable scroll stick-last-col"
                   style="margin: 4px 0 62px"
                   :pagination.sync="pagination"
                   :hide-bottom="tableData.length !== 0"
                   :loading="isTableLoading"
                   color="primary">
            <template v-slot:body-cell-operate="props">
              <q-td>
              </q-td>
            </template>
            <template v-slot:body-cell-operate="props">
              <q-td class="operate" style="width: 100px">
                <div class="btn-group" style="text-align: center">
                  <q-btn
                    flat
                    round
                    dense
                    color="primary"
                    @click="createOrEdit('edit', props.row)"
                    class="iconfont icontubiao-12 font-18"
                  >
                    <q-tooltip>编辑</q-tooltip>
                  </q-btn>
                  <q-btn
                    v-throttle
                    flat
                    round
                    dense
                    color="primary"
                    class="iconfont icontubiao-16 font-18"
                    @click="delStorageLocation(props.row.id)"
                  >
                    <q-tooltip>删除</q-tooltip>
                  </q-btn>
                </div>
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width row flex-center font-size-14" style="color: #999">
                暂无数据
              </div>
            </template>
          </q-table>
          <pagination v-model="pagination.page"
                      :page-size="pagination.rowsPerPage"
                      :total="pagination.rowsNumber"
                      @changePageSize="onPageSizeChange"
                      @changePage="onPageChange"
                      style="margin-bottom: 20px" />
        </div>
      </template>
    </unfold>
    <add-edit-storage-location ref="addEditStorageLocation" @close="getList"/>
  </div>
</template>

<script>
import Pagination from 'src/components/pagination/index'
import Collapse from 'src/components/collapse/index'
import Unfold from 'src/components/unfold/index'
import addEditStorageLocation from './components/add-edit-storage-location'
import { getWarehouses } from 'src/boot/common/warehouses'
import { getStorageLocationList, delStorageLocation } from 'src/boot/system/storage-location'
import _ from 'lodash'

export default {
  name: 'storage-location',
  components: {
    Unfold,
    Pagination,
    Collapse,
    addEditStorageLocation
  },
  data () {
    return {
      thumbStyle: this.CommonConfig.thumbStyle, // 滚动条样式
      warehouseList: [], // 仓库列表
      warehouseDetail: {}, // 仓库详细
      selWarehouseName: '',
      params: {
        number: null,
        name: null,
        id: null // 所选仓库
      },
      tableColumns: [
        { name: 'number', label: '库位编号', field: 'number', align: 'left' },
        { name: 'name', label: '库位名称', field: 'name', align: 'left' },
        { name: 'adminName', label: '库管员', field: 'adminName', align: 'left' },
        { name: 'remarks', label: '备注', field: 'remarks', align: 'left' },
        { name: 'operate', label: '操作', field: 'operate', align: 'left' }
      ],
      tableData: [],
      // 表格分页配置
      pagination: {
        // 当前页码
        page: 1,
        // 每页条数
        rowsPerPage: 15,
        // 总条数
        rowsNumber: 0
      },
      isTableLoading: false
    }
  },
  created () {
    this.getWarehouseList()
  },
  methods: {
    // 获取仓库列表
    getWarehouseList () {
      getWarehouses().then(res => {
        const list = [], detail = {}
        res.data.forEach(item => {
          const i = {
            id: item.id,
            name: (_.isNil(item.name) || _.isEmpty(item.name)) ? '--' : item.name
          }
          list.push(i)
          detail[item.id] = i
        })
        this.warehouseList = list
        this.warehouseDetail = detail

        this.params.id = list[0].id
        this.getList()
      })
    },
    /**
     * 选择仓库
     */
    selWarehouse (id) {
      if (this.params.id === id) {
        return false
      }
      this.params.id = id
      this.getList()
    },
    // 添加/编辑库位
    createOrEdit (type, data) {
      const warehouse = this.warehouseDetail[this.params.id]
      this.$refs.addEditStorageLocation.showDialog(type, warehouse, data)
    },
    // 删除库位
    delStorageLocation (id) {
      this.$utils.showMessage('icontubiao-28', '是否确认删除此库位？', () => {
        delStorageLocation(id).then(res => {
          if (res.code + '' === '1200') {
            if (this.tableData.length <= 1) {
              this.pagination.page = this.pagination.page === 1 ? 1 : this.pagination.page - 1
            }
            this.getList()
            this.$message.success('删除成功')
          }
        })
      }, true)

      // this.$utils.showMessage('icontubiao-28', '请先删除其下库位数据！')
    },
    // 获取库位列表
    getList () {
      this.isTableLoading = true
      const params = {
        pageNum: this.pagination.page,
        pageSize: this.pagination.rowsPerPage
      }
      !_.isEmpty(this.params.number) && (params['number'] = this.params.number)
      !_.isEmpty(this.params.name) && (params['name'] = this.params.name)
      getStorageLocationList(params, this.params.id).then(res => {
        this.pagination.rowsNumber = res.total

        if (res.list.length) {
          res.list.forEach(item => {
            _.isNil(item.adminName) && (item.adminName = '')
            item.remarks = item.remark
            item.adminNames = item.adminName
            _.map(this.tableColumns, 'name').map(i => { (_.isNil(item[i]) || _.isEmpty(item[i])) && (item[i] = '--') })
            _.isEmpty(item.remarks) && (item.remarks = '--')
          })
        }
        this.tableData = res.list
        this.isTableLoading = false
      }).catch(res => {
        this.isTableLoading = false
      })
    },
    /**
     * 重置查询条件
     */
    resetSearch () {
      this.params.number = null
      this.params.name = null
    },
    // 搜索
    searchData () {
      // 查询
      this.pagination.page = 1
      this.getList()
    },
    /**
     * on 分页组件的每页条数发生改变
     * @param val 每页条数
     */
    onPageSizeChange: function (val, page) {
      this.pagination.rowsPerPage = val
      page && (this.pagination.page = page)
      this.getList()
    },

    /**
     * on 分页组件的页码发生改变
     * @param val 页码
     */
    onPageChange: function (val) {
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped lang="stylus">
  .tree-list {
    display flex
    flex-direction column
    width 100%
    min-width 250px
    border-radius 6px
    overflow hidden
    height 100%
    .tree-head {
      flex 40px 0
      padding 0 20px
      line-height 40px
      font-size 18px
    }
  }
  >>>.right-part {
    padding 0 !important
  }
  .box {
    display flex
    flex-direction column
    width 100%
    min-width 250px
    border-radius 6px
    overflow hidden
    /*height 100%*/

    .box-header {
      flex 40px 0
      padding 0 20px
      line-height 40px
      font-size 18px
    }

    &.left {
      .box-content {
        flex 1
        padding-bottom 20px

        .role-item {
          padding-left 30px
          font-size 16px

          &.activated {
            background #cfd6fe
            color $primary
          }

          &:hover {
            background #e8ebff

            /deep/ .q-focus-helper {
              display none
            }
          }
        }

        .q-separator {
          margin-left 20px
          width calc(100% - 40px)
        }
      }
    }
  }
</style>
